﻿@section Styles{
    <style type="text/css">
        #loading {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 999999;
            background: rgba(0, 0, 0, 0.5);
            display: none;
        }

        #spinner {
        }

        #spinner {
            background: url(/content/img/spinner.gif) no-repeat;
            width: 130px;
            height: 133px;
        }

        #tempo {
            display: none;
        }

        #inside {
            background: white;
            margin: 0 auto;
            width: 150px;
        }
    </style>
}
<a id="import" href="#" class="icon-btn">
    <i class="fa fa-sitemap"></i>
    <div>
        Iniciar<br /> Importação
    </div>
</a>
<div id="tempo"></div>
<div id="loading">
    <div id="inside">
        <div>Importando dados...</div>
        <div id="spinner"></div>
    </div>
</div>
@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            $(document).on("click", "#import", function (e) {
                e.preventDefault();
                $.ajax({
                    url: "@Url.Content("~/Importador/Importador/IniciarImportacao")",
                    beforeSend: function () {
                        $("#loading").toggle();
                    },
                    success: function (data) {
                        $("#loading").toggle();
                        $("#tempo").html(data.tempo);
                        $("#tempo").toggle();
                    }
                });

            });

        });
    </script>
}